<template>
    <div class="img">
        <img :src = "Img"
            :style="{ filter: `blur(${100 - num}px)` }">
        <div class="dian" :style="{ opacity: `${(100 - num)/100}` }">{{ num }}%</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {blurryImg} from '@/config/index';
const num = ref(0);
const Img = ref(blurryImg)
const timer = setInterval(() => {
    num.value++
    if (num.value >= 100) {
        clearInterval(timer)
    } 
}, 0.3);
</script>

<style scoped>
.img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

img {
    width: 100%;
    height: 100%;
    z-index: -1;

}

.dian {
    position: absolute;
    color: #fff;
    top: 50%;
    left: 50%;
    font-size: 50px;
}
</style>